<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style type="text/css">
			.mui-bar-nav {
				box-shadow: none;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="border-bottom: solid #EAEAEA 1px;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" style="margin-top: 0;">
				<li id="my_face" class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<div class="mui-media-body mui-pull-left" style="line-height: 60px;">
							头像
						</div>
						
						<p class="mui-pull-right">
							<span class="mui-icon mui-icon-arrowright"
								  style=" font-size: 18px; line-height: 60px;"/>
						</p>
						<img class="mui-media-object mui-pull-right" style="border-radius: 6px; width: 60px; max-width: 60px; height: 60px;"
							 id="my_face_img">
					</a>
				</li>
				<li id="modify_nickname" class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<div class="mui-media-body mui-pull-left">
							昵称
						</div>
						
						<p class="mui-pull-right">
							<span class="mui-icon mui-icon-arrowright" style="font-size: 18px; line-height: 21px;"/>
						</p>
						<p class="mui-pull-right" id="nickname">
							
						</p>
					</a>
				</li>
				<li id="qrcode" class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<div class="mui-media-body mui-pull-left">
							二维码名片
						</div>
						<p class="mui-pull-right">
							<span class="mui-icon mui-icon-arrowright" style="font-size: 18px; line-height: 21px;"></span>
						</p>
					</a>
				</li>
				<li id="qrcode" class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<div class="mui-media-body mui-pull-left">
							更多信息
						</div>
						<p class="mui-pull-right">
							<span class="mui-icon mui-icon-arrowright" style="font-size: 18px; line-height: 21px;"></span>
						</p>
					</a>
				</li>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				var ele_my_face = document.getElementById("my_face");
				var ele_my_face_img = document.getElementById("my_face_img");
				var ele_qrcode = document.getElementById("qrcode");
				var ele_nickname = document.getElementById('nickname');
				
				var me = app.getGlobalUserInfo();
				ele_my_face_img.src = app.getFaceImage(me.id);
				ele_nickname.innerText = me.name;
				
				ele_my_face.addEventListener("tap", function () {
					plus.gallery.pick(function (path) {
						console.log(path);
						mui.openWindow({
							url: "my_face.html",
							id: "my_face.html",
							extras: { face_path: path },
						});
					});
				});
				
				ele_my_face_img.addEventListener('tap', function () {
					
				});
				
				ele_qrcode.addEventListener("tap", function () {
					mui.openWindow("qrcode.html");
				});
			});
		</script>
	</body>

</html>
